<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta charset="utf-8">
    <title>物品记录管理</title>
    <link rel="icon" href="../fffff.ico">
    <link rel="stylesheet" href="../layui/css/layui.css"/>
    <link rel="stylesheet" href="../css/my.css"/>
</head>

<style type="text/css">
    /**
    使表格里面的图片以正常格式显示
     */
    .layui-table-cell {
        text-align: center;
        height: auto;
        white-space: normal;
    }

    .layui-table img {
        max-width: 100%;
    }
</style>

<body>
<ul class="layui-nav layui-bg-green " lay-filter="" style="width: 1900px">

    <li class="layui-nav-item layui-this my" id="user">你好：</li>
    <li class="layui-nav-item"><a href="/changepwd">修改密码</a></li>
    <li class="layui-nav-item"><a onclick="log()" style="cursor: pointer;">退出</a></li>

</ul>
<div style="width: 1850px">
    <div style="float: left;margin-top: 14px;">
        <ul class="layui-nav layui-nav-tree layui-inline" lay-filter="demo"
            style="margin-right: 10px;height: 750px;width: 139px">
            <li class="layui-nav-item"><a href="/info">物品管理</a></li>
            <li class="layui-nav-item"><a href="/thing">物品图片</a></li>
            <li class="layui-nav-item"><a href="/eve">每日的事</a></li>
            <li class="layui-nav-item" style="background-color: #4e5465;"><a href="/password">密码管理</a></li>
        </ul>
    </div>
    <div style="float: left;width: 1600px;margin-left: 0px;background-color: #ffffff;padding: 15px">

        <button class="layui-btn layui-btn-normal" id="insert" style="background-color: #1E9FFF;margin-left: 16px">添加</button>

        <div class="layui-card-body">
            <table class="layui-hide" id="test" lay-filter="test"></table>

            <script type="text/html" id="toolbarDemo">
                <div class="layui-btn-container">
                    <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="getCheckData">删除选中</button>
                    <!--            <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>-->
                    <!--            <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>-->
                </div>
            </script>

            <script type="text/html" id="barDemo">
                <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
            </script>
        </div>
    </div>

</div>

<script src="../layui/layui.all.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>

    //显示姓名
    $.ajax({
        url: "/goods/name",
        type: 'POST',
        dataType: 'json',
        contentType: false,
        processData: false,
        cache: false,
        success: function (data) {
            if (data.success) {

                $("#user").text("你好:" + data.data.userName);
            } else {
                layer.msg(data.msg);
            }
        }
    });

    //退出登录
    function log() {

        layer.confirm('点击确定退出登录', {icon: 3, title: '提示'}, function (index) {
            //do something
            $.ajax({
                url: "/user/logout",
                type: 'POST',
                contentType: false,
                processData: false,
                cache: false,
                success: function (data) {
                    if (data.success) {
                        layer.msg('退出成功');
                        setTimeout(function () {
                            window.location.href = "/login";
                        }, 800);
                    } else {
                        layer.msg(data.msg);
                    }
                }
            });
            layer.close(index);
        });
    }


    layui.use(['table', 'laydate', 'form'], function () {
        var table = layui.table, laydate = layui.laydate;
        var form = layui.form;
        laydate.render({
            elem: "#date5"
        })
        table.render({
            elem: '#test'
            , url: '/pass/list'
            // , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            , defaultToolbar: ['', '', '']
            , title: '用户数据表'
            , cols: [[
                // {type: 'checkbox', fixed: 'left'}
                {type: 'numbers', title: '序号', width: 60, fixed: 'left', unresize: true}
                // ,{field:'deptId', title:'ID', width:80, fixed: 'left', unresize: true}
                , {field: 'state', title: '描述', width: 160}
                , {field: 'name', title: '账户', width: 300, style: 'text-align:center', unresize: true}
                , {field: 'password', title: '密码', width: 180, unresize: true}
                , {field: 'createTime', title: '创建时间', width: 180, unresize: true}
                , {field: 'updateTime', title: '更新时间', width: 180, unresize: true}
                , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 115, unresize: true}
            ]]
            , page: true
            , width: 1183
        });


        var index;
        //头工具栏事件
        table.on('toolbar(test)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'getCheckData':
                    var data = checkStatus.data;
                    break;
                case 'getCheckLength':
                    var data = checkStatus.data;
                    layer.msg('选中了：' + data.length + ' 个');
                    break;
                case 'isAll':
                    layer.msg(checkStatus.isAll ? '全选' : '未全选');
                    break;
                //自定义头工具栏右侧图标 - 提示
                case 'LAYTABLE_TIPS':
                    layer.alert('这是工具栏右侧自定义的一个图标按钮');
                    break;
            }
            ;
        });

        //监听行工具事件
        table.on('tool(test)', function (obj) {
            var data = obj.data;
            //console.log(obj)
            if (obj.event === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    $.ajax({
                        url: '/pass/deleteOne',
                        type: 'post',
                        data: {id: data.id},
                        dataType: 'json',
                        success: function (res) {
                            if (res.code == 0) {
                                layer.msg(res.msg, {
                                    offset: '15px'
                                    , icon: 0
                                    , time: 800
                                })
                            } else {
                                layer.msg(res.msg, {
                                    offset: '15px'
                                    , icon: 1
                                    , time: 1100
                                })
                            }
                            $(".layui-laypage-btn").trigger('click');
                        }
                    })
                    // obj.del();
                    // layer.close(index);
                });
            } else if (obj.event === 'edit') {
                index = layer.open({
                    type: 1,
                    title: '添加或编辑',
                    maxmin: true,
                    shadeClose: true, //点击遮罩关w闭层
                    area: ['358px', '316px'],
                    content: $("#open"),
                    cancel: function () {
                        $(".layui-laypage-btn").trigger("click");
                        //return false 开启该代码可禁止点击该按钮关闭
                    },
                    end: function () {
                        //z在弹出层的按钮提交后
                        $("#open").css({"display": "none"});


                        $(".layui-laypage-btn").trigger("click");

                    }, success: function (layero, index) {
                        $("input[name='id']").val(data.id);
                        $("input[name='name']").val(data.name);
                        $("input[name='userId']").val(data.userId);
                        $("input[name='state']").val(data.state);
                        $("input[name='password']").val(data.password);
                        console.log(layero, index);
                    }
                });

            }
        });

        //点击添加
        $("#insert").on('click', function () {
            $("input[name='id']").val('');
            $("input[name='userId']").val('');
            $("input[name='name']").val('');
            $("input[name='password']").val('');
            $("input[name='state']").val('');
            index = layer.open({
                type: 1,
                content: $("#open"),
                area: ['358px', '316px'],
                shadeClose: true, //点击遮罩关w闭层
                cancel: function () {
                    $(".layui-laypage-btn").trigger("click");
                    //return false 开启该代码可禁止点击该按钮关闭
                },
                end: function () {
                    //z在弹出层的按钮提交后成功执行
                    // $(".layui-laypage-btn").trigger("click");
                    $("#open").css({"display": "none"});

                    table.reload('test', {
                        url: '/pass/list'
                        , where: {} //设定异步数据接口的额外参数
                        //,height: 300
                        , page: {
                            curr: 1 //重新从第 1 页开始
                        },
                        method: 'get'
                    });
                }
            });
        })

        //监听提交
        form.on('submit(formDemo)', function (data) {
            // layer.msg(JSON.stringify(data.field));
            $.ajax({
                url: "/pass/insert",
                type: "post",
                dataType: "json",
                data: {
                    id: data.field.id,
                    userId: data.field.userId,
                    state: data.field.state,
                    user: data.field.user,
                    password: data.field.password,
                    name: data.field.name
                },
                success: function (res) {
                    if (res.success) {
                        //关闭弹出的open层
                        layer.close(index);
                        layer.msg(res.msg);

                    } else {
                        layer.msg(res.msg);
                    }
                }
            });
            return false;
        });

        //搜索分页
        // $("#search").on('click', function () {
        //
        //     table.reload('test', {
        //         url: '/department/get'
        //         , where: {
        //             name: $("input[name='name']").val(),
        //         } //设定异步数据接口的额外参数
        //         //,height: 300
        //         , page: {
        //             curr: 1 //重新从第 1 页开始
        //         },
        //         method: 'get'
        //     });
        //
        // });

    });


</script>
<!--弹出层-->
<div id="open" style="display: none">
    <form class="layui-form" action="" lay-filter="example">
        <div class="layui-form-item" style="display: none">
            <label class="layui-form-label"><span style="color: red"></span>id</label>
            <div class="layui-input-inline">
                <input type="text" name="id" required lay-verify="" placeholder="请输入" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" style="display: none">
            <label class="layui-form-label"><span style="color: red"></span>id</label>
            <div class="layui-input-inline">
                <input type="text" name="userId" required lay-verify="" placeholder="请输入" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" style="margin-top: 15px">
            <label class="layui-form-label"><span style="color: red;margin-right: 1px">*</span>描述</label>
            <div class="layui-input-inline">
                <input type="text" name="state" required lay-verify="required" placeholder="请输入" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><span style="color: red;margin-right: 1px">*</span>账号</label>
            <div class="layui-input-inline">
                <input type="text" name="name" required lay-verify="required" placeholder="请输入" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><span style="color: red;margin-right: 1px">*</span>密码</label>
            <div class="layui-input-inline">
                <input type="text" name="password" required lay-verify="required" placeholder="请输入" autocomplete="off"
                       class="layui-input">
            </div>
        </div>


        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
            </div>
        </div>
    </form>
</div>
</body>

</html>
